<template>
	<view class="merchant">
		<view class="head" :style="{height: pHeight + tHeight + 'px'}">
			<view class="xztitle" :style="[{height: pHeight + 'px', top: tHeight + 'px',lineHeight: pHeight + 'px'}]">
				新商户入驻
				<view class="iconfont icon-dayuhao1" @click="fanhui"></view>
			</view>
		</view>
		<view class="headtop" :style="{marginTop: pHeight + tHeight + 'px'}">
			<view class="nr clearfix">
				<view class="list">
					<image :src="baseUrl + '/wximage/shiyuan.png'"></image>
					<view class="shuzi">1</view>
					<view class="title">新增商户</view>
				</view>
				<view class="list">
					<image :src="baseUrl + '/wximage/kongyuan.png'"></image>
					<view class="shuzi">2</view>
					<view class="title">新建门店</view>
				</view>
				<view class="list">
					<image :src="baseUrl + '/wximage/kongyuan.png'"></image>
					<view class="shuzi">3</view>
					<view class="title">开通分成</view>
				</view>
				<view class="list">
					<image :src="baseUrl + '/wximage/kongyuan.png'"></image>
					<view class="shuzi">4</view>
					<view class="title">设备安装</view>
				</view>
				<view class="list">
					<image :src="baseUrl + '/wximage/kongyuan.png'"></image>
					<view class="shuzi">5</view>
					<view class="title">完成新增</view>
				</view>
			</view>
		</view>
		
		
		<view class="form">
			<view class="content clearfix">
				<view class="name fl">商户账号</view>
				<view class="inp fr">
					<input type="text" v-model="formData.username" placeholder="请输入商户账号" />
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">商户名称</view>
				<view class="inp fr">
					<input type="text" v-model="formData.nickname" placeholder="请输入商户名称" />
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">联系人</view>
				<view class="inp fr">
					<input type="text" v-model="formData.lxrname" placeholder="请输入联系人" />
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">手机号码</view>
				<view class="inp fr">
					<input type="text"  v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
				</view>
			</view>
			<!-- <view class="content clearfix">
				<view class="name fl">省市区</view>
				<view class="xuanze fr" @click="getLocation">
					<text v-if="formData.province_text==''">请选择</text>
					<text v-else>{{formData.province_text}}{{formData.city_text}}{{formData.district_text}}</text>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">详细地址</view>
				<view class="inp fr">
					<input type="text" placeholder="请输入详细地址" v-model="formData.full_address" />
				</view>
			</view> -->
			<view class="content clearfix">
				<view class="name fl">结算方式</view>
				<view class="xuanze fr" @click="jsstatus = true">
					{{jslabel}}
				</view>
				<u-select v-model="jsstatus" :list="jslist" @confirm="confirmjs"></u-select>
			</view>
			<view class="content clearfix">
				<view class="name fl">订单查看权限</view>
				<view class="img fr">
					<image @click="orderSelect(true)" v-if="!formData.cities.orderfind" :src="baseUrl + '/wximage/wxuanzhong.png'"></image>
					<image @click="orderSelect(false)" v-else :src="baseUrl + '/wximage/xuanzhong.png'"></image>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">分成比例查看权限</view>
				<view class="img fr">
					<image @click="payoutSelect(true)" v-if="!formData.cities.payouts" :src="baseUrl + '/wximage/wxuanzhong.png'"></image>
					<image @click="payoutSelect(false)" v-else :src="baseUrl + '/wximage/xuanzhong.png'"></image>
				</view>
			</view>
			<view class="content clearfix">
				<view class="name fl">收益记录查看权限</view>
				<view class="img fr">
					<image @click="endorderSelect(true)" v-if="!formData.cities.endorder" :src="baseUrl + '/wximage/wxuanzhong.png'"></image>
					<image @click="endorderSelect(false)" v-else :src="baseUrl + '/wximage/xuanzhong.png'"></image>
				</view>
			</view>
			<view class="content contentlast clearfix">
				<view class="name fl">按日统计</view>
				<view class="img fr">
					<image @click="returnorderSelect(true)" v-if="!formData.cities.returnorder" :src="baseUrl + '/wximage/wxuanzhong.png'"></image>
					<image @click="returnorderSelect(false)" v-else :src="baseUrl + '/wximage/xuanzhong.png'"></image>
				</view>
			</view>
		</view>
		<view class="formfc">
			<view class="content clearfix">
				<view class="name fl">结算逻辑</view>
				<view class="xuanze fr" @click="msstatus = true">
					{{mslabel}}
				</view>
				<u-select v-model="msstatus" :list="mslist" @confirm="confirmms"></u-select>
			</view>
			<view class="content contentlast clearfix" v-if="msvalue == 2">
				<view class="name fl">成本比例(%)</view>
				<view class="inp fr">
					<input type="text" v-model="formData.fcbili" placeholder="请输入成本比例" />
				</view>
			</view>
			<view class="content contentlast clearfix" v-if="msvalue == 3">
				<view class="name fl">实际比例(%)</view>
				<view class="inp fr">
					<input type="text" v-model="formData.fcbili" placeholder="请输入实际比例" />
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submit" @click="submit">下一步</view>
		</view>
	</view>
</template>

<script>
	const captureLocation = (res) => {
		var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
		var province = [];
		var region_province = '';
		var addressBean = {
			province: null,
			country: null,
			city: null,
			address: null,
		};
	
		function regexAddressBean(address, addressBean) {
			regex = /^(.*?[市]|.*?[州]|.*?地区|.*?特别行政区)(.*?[区]|.*?[市]|.*?[县])(.*?)$/g;
			var addxress = regex.exec(address);
			addressBean.city = addxress[1];
			addressBean.country = addxress[2];
			addressBean.address = addxress[3] + '(' + res.name + ')';
		}
		if (!(province = regex.exec(res.address))) {
			regex = /^(.*?(省|自治区))(.*?)$/;
			region_province = regex.exec(res.address);
			addressBean.province = region_province[1];
			regexAddressBean(region_province[3], addressBean);
		} else {
			addressBean.province = region_province[1];
			regexAddressBean(res.address, addressBean);
		}
		return addressBean;
	}
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				headerTop: 0,
				pHeight: 0,
				tHeight: 0,
				jsstatus: false,
				jslist: [{
					value: 1,
					label: 'D+0（当天可提现）',
				}, {
					value: 2,
					label: 'D+1（第二天可提现）',
				}, {
					value: 3,
					label: 'D+7（第七天可提现）',
				}],
				jsvalue: 0,
				jslabel: '请选择',
				address: '',
				latitude: '',
				longitude: '',
				province: '',
				city: '',
				district: '',
				provincetitle: '',
				citytitle: '',
				areatitle: '',
				formData: {
					username: '',
					nickname: '',
					lxrname: '',
					mobile: '',
					full_address: '',
					jsfangshi: '',
					cities:{
						orderfind: false,
						payouts: false,
						endorder: false,
						returnorder: false
					},
					agent_id: uni.getStorageSync('agent_id'),
					role_id: uni.getStorageSync('role_id'),
					lat: '',
					lng: '',
					province_text: '',
					city_text: '',
					district_text: '',
					province: '',
					city: '',
					district: '',
					fcfangshi: 0,
					fcbili: '',
				},
				msstatus: false,
				mslist: [{
					value: 1,
					label: '正常逻辑',
				}, {
					value: 2,
					label: '成本逻辑',
				}, {
					value: 3,
					label: '实际比例',
				}],
				msvalue: 0,
				mslabel: '请选择',
			}
		},
		
		onLoad() {
			// 头部距离
			let res = uni.getSystemInfoSync() ///微信api方法
			let titleH;
			if (res && res['system']) {
				// 判断是否是安卓操作系统 （标题栏苹果为44px,安卓为48px）
				if (res['system'].indexOf('Android') > 0) {
					titleH = 48
				} else {
					titleH = 46
				}
				this.headerTop = titleH + res['statusBarHeight']
				this.pHeight = titleH
				this.tHeight = res['statusBarHeight']
			}
			
			//查看是否有进行到半路的
			if(!(uni.getStorageSync('bussiness_id') == undefined||uni.getStorageSync('bussiness_id') == null||uni.getStorageSync('bussiness_id') == '')){
				uni.showModal({
				    title: '提示',
				    content: '当前存在未完成的新商户入驻流程，是否继续',
				    success: function (res) {
				        if (res.confirm) {
				            // console.log('用户点击确定');
							var bussiness_ruzhu = uni.getStorageSync('bussiness_ruzhu');
							//查看一下入驻到第几步了
							if(bussiness_ruzhu=='2'){
								//跳转到新建门店中
								uni.redirectTo({
									url: '/subpackageA/merchant/store'
								})
							}else if(bussiness_ruzhu=='3'){
								//跳转到开通分成中
								uni.redirectTo({
									url: '/subpackageA/merchant/divide'
								})
							}else if(bussiness_ruzhu=='4'){
								//跳转到开通分成中
								uni.redirectTo({
									url: '/subpackageA/merchant/device'
								})
							}else if(bussiness_ruzhu=='5'){
								//跳转到开通分成中
								uni.redirectTo({
									url: '/subpackageA/merchant/success'
								})
							}
				            // 用户点击了确定按钮的相关逻辑可以放在这里
				        } else if (res.cancel) {
				            // console.log('用户点击取消');
							uni.removeStorageSync('bussiness_ruzhu');
							
							uni.removeStorageSync('stores_id');
							
							uni.removeStorageSync('bussiness_id');
							
							uni.removeStorageSync('billingidm');
							
							uni.removeStorageSync('billingidk');
							
							uni.redirectTo({
								url: '/subpackageA/merchant/index'
							})
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				});
			}
		},
		
		methods: {
			submit(){
				this.formData.cities = JSON.stringify(this.formData.cities);

				//判断一下
				if(this.formData.username==null||this.formData.username==''||this.formData.username==undefined){
					uni.showToast({
						title: '商户账号不能为空',
						icon: 'none'
					})
					return false;
				}
				
				if(this.formData.nickname==null||this.formData.nickname==''||this.formData.nickname==undefined){
					uni.showToast({
						title: '商户名称不能为空',
						icon: 'none'
					})
					return false;
				}
				
				if(this.formData.lxrname==null||this.formData.lxrname==''||this.formData.lxrname==undefined){
					uni.showToast({
						title: '联系人不能为空',
						icon: 'none'
					})
					return false;
				}
				
				if(this.formData.mobile==null||this.formData.mobile==''||this.formData.mobile==undefined){
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					})
					return false;
				}

				// if(this.formData.full_address==null||this.formData.full_address==''||this.formData.full_address==undefined){
				// 	uni.showToast({
				// 		title: '详细地址不能为空',
				// 		icon: 'none'
				// 	})
				// 	return false;
				// }
				
				if(this.formData.jsfangshi==null||this.formData.jsfangshi==''||this.formData.jsfangshi==undefined){
					uni.showToast({
						title: '结算方式不能为空',
						icon: 'none'
					})
					return false;
				}
				
				var reg = /^1[3456789]\d{9}$/;
				if(!reg.test(this.formData.mobile)){
					uni.showToast({
						title: '手机格式不正确',
						icon: 'none'
					})
					return false;
				}
				//获取代理商的或者管理员的id
				
				if(this.msvalue == 2 || this.msvalue == 3){
					if(this.formData.fcbili==null||this.formData.fcbili==''||this.formData.fcbili==undefined){
						uni.showToast({
							title: '结算逻辑比例不能为空',
							icon: 'none'
						})
						return false;
					}
					if(parseFloat(this.formData.fcbili) >= 100){
						uni.showToast({
							title: '比例不能大于100',
							icon: 'none'
						})
						return false;
					}
				}
				
				this.request({
					url: '/xcxlogin/add',
					data: this.formData,
					method: "POST"
				}).then(res => {
					if (res.data.code == 200) {
						var userId = res.data.data.id;//创建的商户id
						uni.setStorageSync('bussiness_id',userId);
						uni.setStorageSync('bussiness_ruzhu',2);
						
						setTimeout(function() {
							uni.showToast({
								title: '商户创建成功！',
								icon: 'none'
							});
							uni.redirectTo({
								url: '/subpackageA/merchant/store'
							})
						}, 500);		
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			confirmjs(e) {
				this.jsvalue = e[0].value;
				this.jslabel = e[0].label;
				this.formData.jsfangshi = e[0].value;
			},
			confirmms(e) {
				this.msvalue = e[0].value;
				this.mslabel = e[0].label;
				this.formData.fcfangshi = e[0].value;
			},
			orderSelect(e){
				this.formData.cities.orderfind = e;
			},
			
			payoutSelect(e){
				this.formData.cities.payouts = e;
			},
			
			endorderSelect(e){
				this.formData.cities.endorder = e;
			},
			
			returnorderSelect(e){
				this.formData.cities.returnorder = e;
			},
			
			getLocation() {

				uni.chooseLocation({
					success: (res) => {
						this.address = res.address;
						this.formData.full_address = res.address;
						this.latitude = res.latitude;
						this.formData.lat = res.latitude;
						this.longitude = res.longitude;
						this.formData.lng = res.longitude;
						let locationObj = captureLocation(res);
						if(locationObj.province){
							this.provincetitle = locationObj.province;
							this.formData.province_text = locationObj.province;
						}else{
							this.provincetitle = locationObj.city;
							this.formData.province_text = locationObj.city;
						}
						
						this.citytitle = locationObj.city;
						this.formData.city_text = locationObj.city;
						this.areatitle = locationObj.country;
						this.formData.district_text = locationObj.country;
						
						this.request({
							url: '/xcxlogin/getaddressCode',
							data: {
								code: this.provincetitle
							},
							method: "POST"
						}).then(res1 => {
							if (res1.data.code == 200) {
								this.province = res1.data.data.result[0][0].id;
								this.formData.province = res1.data.data.result[0][0].id;
							} else {
								uni.showToast({
									title: '请求失败，请稍后再试',
									icon: 'none'
								})
							}
						})
				
						this.request({
							url: '/xcxlogin/getaddressCode',
							data: {
								code: this.citytitle
							},
							method: "POST"
						}).then(res1 => {
							if (res1.data.code == 200) {
								this.city = res1.data.data.result[0][0].id;
								this.formData.city = res1.data.data.result[0][0].id;
							} else {
								uni.showToast({
									title: '请求失败，请稍后再试',
									icon: 'none'
								})
							}
						})
				
						this.request({
							url: '/xcxlogin/getaddressCode',
							data: {
								code: this.areatitle
							},
							method: "POST"
						}).then(res1 => {
							if (res1.data.code == 200) {
								this.district = res1.data.data.result[0][0].id;
								this.formData.district = res1.data.data.result[0][0].id;
								this.addressquancheng = res1.data.data.result[0][0].address;
							} else {
								uni.showToast({
									title: '请求失败，请稍后再试',
									icon: 'none'
								})
							}
						})
					}
				});
			},
			fanhui() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.merchant {
		width: 100%;
		margin: 0 auto;
		height: 100vh;
		background: #f9f9ff;
		overflow-y: scroll;

		.head {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);

			.xztitle {
				position: fixed;
				left: 0%;
				top: 0;
				width: 100%;
				text-align: left;
				color: #333333;
				font-size: 32rpx;
				padding-left: 74rpx;
				font-weight: 700;

				text {
					font-size: 24rpx;
				}

				.iconfont {
					position: absolute;
					top: 0;
					left: 30rpx;
					font-size: 44rpx;
				}
			}
		}

		.headtop {
			width: 100%;		
			background: linear-gradient(90deg, #f9f9ff, #d4e8ff);
			height: 300rpx;
			
			.nr{
				width: 94%;
				margin: 0 auto;
				box-shadow:rgba(223, 230, 255, 0.67) 0px 0px 6px;
				border-radius: 20rpx;
				background: #FFFFFF;
				position: relative;
				
				.list{
					width: 20%;
					float: left;
					text-align: center;
					position: relative;
					
					image{
						width: 64rpx;
						height: 64rpx;
						margin-top: 26rpx;
					}
					
					.shuzi{
						font-size: 32rpx;
						color: #FFFFFF;
						font-weight: 700;
						position: absolute;
						top: 36rpx;
						left: 62rpx;
					}
					
					.title{
						font-size: 24rpx;
						color: #333333;
						margin-bottom: 26rpx;
						font-weight: 700;
					}
				}
				
				.hengxian{
					position: absolute;
					width: 490rpx;
					height: 2rpx;
					background: #C5C5C5;
					left: 110rpx;
					top: 56rpx;
				}
			}
		}
		
		.form{
			width: 94%;
			margin: 0 auto;
			margin-top: -120rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow:rgba(223, 230, 255, 0.67) 0px 0px 6px;
			
			.content{
				height: 92rpx;
				line-height: 92rpx;
				border-bottom: 1rpx solid #D8D8D8;
				
				.name{
					font-size: 28rpx;
					color: #333333;
					width: 40%;
				}
				
				.inp{
					width: 60%;
					text-align: right;
					
					input{
						font-size: 28rpx;
						color: #999999;
						height: 92rpx;
						line-height: 92rpx;
					}
				}
				
				.xuanze{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					color: #368BF8;
				}
				
				.img{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					
					image{
						width: 108rpx;
						height: 64rpx;
						margin-top: 12rpx;
					}
				}
			}
			
			.contentlast{
				border: none;
			}
		}
		
		.formfc{
			width: 94%;
			margin: 0 auto;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx;
			box-shadow:rgba(223, 230, 255, 0.67) 0px 0px 6px;
			
			.content{
				height: 92rpx;
				line-height: 92rpx;
				border-bottom: 1rpx solid #D8D8D8;
				
				.name{
					font-size: 28rpx;
					color: #333333;
					width: 40%;
				}
				
				.inp{
					width: 60%;
					text-align: right;
					
					input{
						font-size: 28rpx;
						color: #999999;
						height: 92rpx;
						line-height: 92rpx;
					}
				}
				
				.xuanze{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					color: #368BF8;
				}
				
				.img{
					width: 60%;
					text-align: right;
					height: 92rpx;
					line-height: 92rpx;
					
					image{
						width: 108rpx;
						height: 64rpx;
						margin-top: 12rpx;
					}
				}
			}
			
			.contentlast{
				border: none;
			}
			
			.contentdx{
				
				.name{
					font-size: 28rpx;
					color: #333333;
					width: 50%;
				}
				
				.inp{
					width: 40%;
				}
				
				image{
					width: 40rpx;
					height: 40rpx;
					margin-top: 26rpx;
				}
				
				.xuanze{
					width: 40%;
				}
			}
		}
		
		.footer{
			width: 100%;
			margin: 0 auto 40rpx;
			margin-top: 60rpx;
			height: 72rpx;
			text-align: center;
			
			.submit{
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: linear-gradient(90deg, #65bdfc, #398ef8);
				margin-left: 248rpx;
				border-radius: 36rpx;
				border-top-left-radius: 0;
				border-bottom-left-radius: 42rpx;
				color: #FFFFFF;
				font-size: 32rpx;
			}
			
		}
	}
</style>